{% extends 'base.html' %}
{% block title %}Brispon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
/*      
.pagination {
	margin:26px auto 0;
	width:100px;
}

.pagination li {
	float:left;
	margin:0 1px;
	list-style:none;
}

.pagination li a {
	display:block;
	width:12px;
	height:0;
	padding-top:12px;
	background-image:url({% url base_static "images/pagination.png" %});
	background-position:0 0;
	float:left;
	overflow:hidden;
}
.pagination li.current a {
	background-position:0 -12px;
}

.gradient {
	background:#fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eaeaea));
	background: -moz-linear-gradient(top, #fff, #eaeaea);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#eaeaea)";
}
.shadow-all { 
	-moz-box-shadow: 0px 2px 4px #999;
	-webkit-box-shadow: 0px 2px 4px #999;
	box-shadow: 0px 2px 4px #999;
	/*-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=160, Color='#999999')";
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=160, Color='#999999');*/
}
.item { padding:1em; margin:0 0 2em; }
*/
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript" src="{% url base_static "js/slides.min.jquery.js" %}"></script>
<script type="text/javascript" src="{% url base_static "js/jquery.endless-scroll.js" %}"></script>
<script type="text/javascript">
$(function(){
	// Set starting slide to 1
	var startSlide = 1;
	// Get slide number if it exists
	if (window.location.hash) {
		startSlide = window.location.hash.replace('#','');
	}
	// Initialize Slides
	$('#slides').slides({
		preload: true,
		preloadImage: "{% url base_static "images/loading.gif" %}",
		generatePagination: true,
		play: 2500,
		pause: 4000,
		hoverPause: true,
		// Get the starting slide
		start: startSlide,
		animationComplete: function(current){
			// Set the slide number as a hash
			window.location.hash = '#' + current;
		}
	});
    
    $(document).endlessScroll({
	    bottomPixels: 500,
	    fireDelay: 10,
	    callback: function(i) {
	    	i = i;
	    	var last_img = $("#ssss");
	        var address = 'event/increase/' + '?gp=' + i; 
	    	console.log(address);
	      	$.get(address, function(data) {
	      		last_img.append(data);
			});
    	}
	});
			
});
</script>
{% endblock%}

{% block content %}
<!-- Main hero unit for a primary marketing message or call to action -->
<div class="hero-unit">
  <div id="slides">
    <div class="slides_container">
    {% for s in stores %}
      <div class="slide">
        <h1>{{ s.name }}</h1>
        <img src="{{ s.logo }}" />
      </div>
    {% endfor %}
    </div>
  </div>
</div>

<!-- Example row of columns -->
<div id="ssss">
  <div class="row">
    <div class="span-one-third">
      <h2>닭갈비집</h2>
      <p><img src="{% url base_static "images/2.png" %}" width="100" height="100" /></p>
      <p>가든시티에 위치하고 있어요..</p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span-one-third">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">View details &raquo;</a></p>
    </div>
    <div class="span-one-third">
      <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="span-one-third">
        <h2>Heading</h2>
        <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
      <div class="span-one-third">
        <h2>Heading</h2>
         <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
      <div class="span-one-third">
        <h2>Heading</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn" href="#">View details &raquo;</a></p>
      </div>
    </div>
  </div>
</div>    
{% endblock %}
